<template>

  <div>
    <Search @submit="submitSearch" />
    <el-card>
      <el-row class="top">
        <el-button type="success" round @click="newCreate">新建</el-button>
      </el-row>
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column prop="code" label="仓库编码" width="100" align="center" />
        <el-table-column prop="name" label="仓库名称" width="100" align="center" />
        <el-table-column label="仓库类型" width="100" align="center">
          <template #default="{ row }">
            {{ optionType[row.type] || '数据有误' }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="省/市/区" width="180" align="center" />
        <el-table-column prop="address" label="详细地址" width="180" align="center" />
        <el-table-column prop="status" label="仓库状态" width="100" align="center">
          <template #default="{row}">
            {{ optionStatus[row.status] ||'数据有误' }}
          </template>
        </el-table-column>
        <el-table-column prop="surface" label="仓库面积m²" width="100" align="center" />
        <el-table-column prop="includedNum" label="库区数量" width="100" align="center" />
        <el-table-column prop="personName" label="负责人" width="100" align="center" />
        <el-table-column prop="phone" label="联系电话" width="120" align="center" />
        <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template #default="{row}">
            <el-button type="text" size="small" @click="editClick(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="handleClick(row.id)">{{ optionStatus[row.status] }}</el-button>
            <el-button type="text" size="small" @click="delClick(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <Pagination />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getListPage, delList } from '@/api'
export default {
  data() {
    return {
      list: [],
      formData: {
        current: '1',
        size: '10'
      },
      optionType: {
        'ZZ': '中转仓',
        'JG': '加工仓',
        'CB': '储备仓',
        'LC': '冷藏仓'
      },
      optionStatus: {
        '0': '停用',
        '1': '启用'
      }
    }
  },
  async created() {
    console.log('created')
    await this.fatchGetList(this.formData)
  },
  methods: {
    // 获取表格列表
    async fatchGetList(val) {
      const { data } = await getListPage(val)
      this.list = data.records
      console.log(data)
      // this.formData.current =
    },
    // 搜索框提交
    async submitSearch(val) {
      this.fatchGetList(val)
    },
    async delClick(id) {
      await delList({ 'ids[]': id })
      this.fatchGetList()
    },
    // 新建
    newCreate() {
      console.log('跳到新建页面')
      this.$router.push('warehouse/newcreate')
    },
    editClick() {

    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-button--success{
  background-color: #00BE76;
 width: 108px;
}
.top{
  margin:  0px 10px 0px 30px;
}
::v-deep .is-always-shadow{
  margin: 10px 10px;
}
</style>
